<template>
  <div class="row mb-2">
    <div class="col-md-6" v-for="(item, index) in datas" :key="index">
      <div class="card flex-md-row mb-4 box-shadow h-md-250">
        <div class="card-body d-flex flex-column align-items-start">
          <strong class="d-inline-block mb-2 text-primary">{{item.mark}}</strong>
          <h3 class="mb-0">
            <a class="text-dark" href="#">{{item.title}}</a>
          </h3>
          <div class="mb-1 text-muted">{{item.date}}</div>
          <p class="card-text mb-auto">{{item.desc}}</p>
          <el-button type="text">阅读全文</el-button>
        </div>
        <!-- <img class="card-img-right flex-auto d-none d-md-block" src="static/sucai1.jpg" alt="Card image cap"> -->
        <el-image class="card-img-right flex-auto d-none d-md-block" :src="item.imgSrc + (index + 1) + '.jpg'" fit="cover">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'good-article',
  title: '优质文章',
  data() {
    return {
      datas: new Array(2).fill({
        mark: 'Linux',
        title: 'Linux featured post',
        date: '2019-05-06',
        desc: `This is a wider card with supporting text below as a natural lead-in to additional content.`,
        imgSrc: 'static/sucai'
      })
    }
  }
}
</script>
<style lang = 'scss'>
</style>